<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    width="500px"
    @close="close"
  >
    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
      <!-- <el-form-item label="新密码" prop="user_password">
        <el-input
          v-model.trim="form.user_password"
          placeholder="密码长度为6-50位"
        />
      </el-form-item> -->
      <el-form-item label="权限组" prop="role_id">
        <el-select
          v-model="form.role_id"
          placeholder="请选择权限组"
          @change="roleChange"
        >
          <el-option
            v-for="item in roleData"
            :key="item.id"
            :label="item.role_name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { getList } from '@/api/role'
import { setAdmin } from '@/api/admin'
export default {
  name: 'MemberEdit',
  data() {
    return {
      roleData: [],
      form: {
        role_id: null,
      },
      rules: {},
      title: '修改权限',
      dialogFormVisible: false,
    }
  },
  methods: {
    showEdit(row) {
      this.form.user_id = row.id
      this.form.role_id = row.role_id ? row.role_id : null
      this.dialogFormVisible = true
      this.getRoleData()
    },
    close() {
      this.$refs['form'].resetFields()
      this.form = this.$options.data().form
      this.dialogFormVisible = false
    },
    save() {
      this.$refs['form'].validate(async (valid) => {
        if (valid) {
          const { data } = await setAdmin(this.form)
          if (data.is_success) {
            this.$baseMessage('修改成功', 'success', 'vab-hey-message-success')
          }
          this.$emit('fetch-data')
          this.close()
        }
      })
    },
    roleChange(id) {
      this.form.role_id = id
    },
    async getRoleData() {
      const data = await getList({ status: 1 })
      this.roleData = data.data.length > 0 ? data.data : []
    },
  },
}
</script>
